import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { Sectionv3Wrapper } from './style'
import SectionHeader from '@/components/section-header'
import SectionFooter from '@/components/section-footer'
import ScollView from '@/base-ui/scoll-view'
import RoomItem from '@/components/room-item'

const Sectionv3 = memo(({dataInfo}) => {
  return (
    <Sectionv3Wrapper>
        <SectionHeader title={dataInfo.title} subtitle={dataInfo.subtitle}/>
        <div className='plus-list'>
            <ScollView>
                {
                    dataInfo.list?.map(item => <RoomItem key={item.id} width="20%" room={item} />)
                }
            </ScollView>
        </div>
        <SectionFooter name="plus" type={dataInfo.type}/>
    </Sectionv3Wrapper>
  )
})

Sectionv3.propTypes = {
    dataInfo: PropTypes.object
}

export default Sectionv3